:root{
    --clr-dark: #0d0d10ff;
    --clr-light: #ffffffff;
    --clr-primary: #642ca9ff;
    --clr-secondary: #d1345bff;
    --clr-primary-o: #9bd356ff;
    --clr-secondary-o: #2ecba4ff;
    --clr-border: #2d2d30ff;
    --clr-subtle: #0D0D20ff;
}

/* Misc */

@font-face {
    font-family: flexi ibm vga; /* font made by VileR at https://int10h.org */
    src: url(fonts/Flexi_IBM_VGA_True.ttf)
}

@font-face {
    font-family: liberationSerif;
    src: url(fonts/LiberationSerif-Regular.ttf)
}

@keyframes backgroundSlide {
    from{background-position: 0px 0px;}
    to{background-position: 200px 200px;}
}

/* Id atribute */

#home {
    align-items: center;
    text-align:center;
    width: 165px;
    transition: 0.5s;
}

#home:hover {
filter: invert(5%) drop-shadow(0px 0px 20px var(--clr-primary)) drop-shadow(0px 0px 20px var(--clr-primary));
transition: 0.1s;
}

#container {
    display: grid;
    margin: auto;
    width: 900px;
    height: auto;
    grid-template-columns: repeat(6, 145px);
    grid-template-rows: repeat(6, 145px);
    grid-gap: 5px;
    padding: 0px;
}
/* Class atribute */

.item {
    padding: 0px;
    background-color: var(--clr-dark);
    background: linear-gradient(180deg,var(--clr-dark) 0%, var(--clr-subtle) 50%, var(--clr-dark) 100%);
    border: 5px solid var(--clr-border);
    filter: drop-shadow(-10px 10px 4px #00000090);
}
.item-content {
    padding: 1em;
    border: 0px;
    text-align: justify;
    overflow: auto;
}
/* nav items*/
.item-1 {
    grid-area: 1 / 1 / 2 / 3; /* grid row start, grid column start, grid row end, grid column end */
}
.item-2 {
    grid-area: 1 / 3 / 2 / 4;
}
.item-3 {
    grid-area: 1 / 4 / 2 / 5;
}
.item-4 {
    grid-area: 1 / 5 / 2 / 6;
}
.item-5 {
    grid-area: 1 / 6 / 2 / 7;
}

.text-center {
    text-align: center;
}

.invisible {
    padding: 10px;
    text-align: center;
    overflow: auto;
}

.window {
    display: block;
    height: 20px;
    background-color: var(--clr-border);
    border-bottom: 5px solid var(--clr-border);
    border-left: 5px solid var(--clr-border);
    border-right: 5px solid var(--clr-border);
    margin: 0px;
    overflow: hide;
}

.window_buttons {
    height: 20px;
    object-position: top right;
    float: right;
}

.window_text {
    margin: 0px;
    float: left;
    font-family: flexi ibm vga;
    font-size: 20px;
}

.nav {
    font-family: flexi ibm vga;
    font-size: 100%;
}
/* Elements */

body {
    background: url(images/background.jpg);
    background-size: cover;
    /*
    background-repeat: repeat;
    animation-timing-function: linear;
    animation-name: backgroundSlide;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    */
    font-family: "Times New Roman", Times, serif;
}
h1 {
    color: var(--clr-primary);
    margin: 1px;
}
h2 {
   margin: 1px;
}
h3 {
    margin: 1px;
}
p {
    color: var(--clr-light);
    margin: 1px;
}
h1 a {
    color: var(--clr-secondary);
}
h1 a:hover {
    color: var(--clr-secondary-o);
}
a p {
    color: var(--clr-secondary-o);
}
a p:visited{
    color: var(--clr-primary-o);
}